<template>
  <div class="app-container">
    <el-card>
      <div class="app__body__container">
        <div class="ma__b__15">
          <el-button
            type="primary"
            :icon="Plus"
            @click.stop="openDialog({ isEdit: false })"
            >新增工艺</el-button
          >
          <el-button type="danger" :icon="Delete" @click.stop="delAll"
            >批量删除</el-button
          >
        </div>
        <div class="app__body__table__container">
          <el-table
            v-loading="loading"
            ref="multipleTableRef"
            border
            :data="tableData"
            highlight-current-row
            style="width: 100%"
            max-height="calc(100vh - 280px)"
            show-overflow-tooltip
            @selection-change="handleSelectionChange"
          >
            <el-table-column type="selection" width="55" />
            <el-table-column label="是否默认工艺" width="190" align="center">
              <template #default="scope">
                <span v-if="scope.row.default == 1" class="success-text"
                  >默认工艺</span
                >
                <el-button
                  v-else
                  @click.stop.prevent="setDefaultCraftSubmit(scope.row.craftId)"
                  >设为默认</el-button
                >
              </template>
            </el-table-column>
            <el-table-column label="序号" width="100" align="center">
              <template #default="scope">
                <span>{{ scope.$index + 1 }}</span>
              </template>
            </el-table-column>
            <el-table-column property="addTime" label="添加时间" width="170" />
            <el-table-column property="content" label="工艺内容">
              <template #default="scope">
                <div class="row_content-container">
                  <div
                    class="content_item-container"
                    v-for="(item, index) in scope.row.content"
                    :key="item.id"
                  >
                    <div class="item_content">
                      {{ item.content || "暂无步骤内容" }}
                    </div>
                    <div
                      class="step-text"
                      v-if="index < scope.row.content.length - 1"
                    >
                      <i-ep-right class="icon" />
                    </div>
                  </div>
                </div>
              </template>
            </el-table-column>
            <el-table-column
              label="操作"
              width="250"
              align="center"
              fixed="right"
            >
              <template #default="scope">
                <el-button
                  type="primary"
                  :icon="Edit"
                  @click.stop.prevent="
                    openDialog({ isEdit: true, row: scope.row })
                  "
                  >编辑</el-button
                >
                <el-button
                  type="danger"
                  :icon="Delete"
                  @click.stop.prevent="delRow(scope.row)"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
          <pagination
            v-if="count > 0"
            v-model:total="count"
            v-model:page="pageInfo.page"
            v-model:limit="pageInfo.limit"
            @pagination="handleQuery"
          />
        </div>
      </div>
    </el-card>
    <AddCraftDialog ref="AddCraftDialogRef" @submit-success="handleQuery" />
  </div>
</template>

<script lang="ts" setup name="CraftManager">
import { getCraftList, setDefaultCraft, delCraft } from "@/api/craft/index";
import { type CraftItem } from "@/api/craft/types";
import AddCraftDialog from "./components/AddCraftDialog.vue"; // 添加或编辑工艺
import { Plus, Edit, Delete } from "@element-plus/icons-vue";

// 表格数据
const tableData = ref<CraftItem[]>([]);
const pageInfo = ref<PageInfoType>({
  page: 1,
  limit: 10,
});
const loading = ref<boolean>(false);
const count = ref<number>(0);

// 获取工艺列表
const getCraftListService = async () => {
  let params = {
    ...pageInfo.value,
  };
  loading.value = true;
  let res = await getCraftList(params);
  loading.value = false;
  if (res) {
    console.log("获取工艺列表勒 ", res.data.list);
    count.value = res.data.count;
    tableData.value = [...res.data.list];
  }
};

// 调用
getCraftListService();

// 分页点击
const handleQuery = () => {
  getCraftListService();
};

// 表格多选逻辑
const multipleSelection = ref<CraftItem[]>([]);
// 多选函数触发
const handleSelectionChange = (val: CraftItem[]) => {
  console.log("当前选中  ", val);
  multipleSelection.value = val;
};

// 设置默认工艺
const setDefaultCraftSubmit = async (id: number) => {
  console.log("设为默认工艺  ", id);
  ElMessageBox.confirm("您确定要设置该工艺为默认工艺吗?", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      setDefaultCraftService(id);
    })
    .catch(() => {
      ElMessage({
        message: "已取消",
        type: "info",
      });
    });
};
// 调用设置默认工艺接口
const setDefaultCraftService = async (id: number) => {
  let res = await setDefaultCraft(id, {});
  if (res) {
    ElMessage({
      message: "设置成功",
      type: "success",
    });
    pageInfo.value.page = 1;
    getCraftListService();
  }
};
// 删除表格行
const delRow = (row: CraftItem) => {
  ElMessageBox.confirm("您确定要删除该工艺吗?", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      delCraftService(row.craftId);
    })
    .catch(() => {
      ElMessage({
        message: "已取消",
        type: "info",
      });
    });
};
// 批量删除表格行
const delAll = () => {
  if (!multipleSelection.value.length) {
    ElMessage({
      message: "请选择需要删除的工艺",
      type: "error",
    });
    return;
  }
  let ids = multipleSelection.value.map((elm: CraftItem) => {
    return elm.craftId;
  });
  ElMessageBox.confirm("您确定要删除这些工艺吗?", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      delCraftService(ids.join(","));
    })
    .catch(() => {
      ElMessage({
        message: "已取消",
        type: "info",
      });
    });
};
// 调用删除接口
const delCraftService = async (id: number | string) => {
  let res = await delCraft(String(id), {});
  if (res) {
    ElMessage({
      message: "删除成功",
      type: "success",
    });
    pageInfo.value.page = 1;
    getCraftListService();
  }
};

// 添加或编辑工艺
const AddCraftDialogRef = ref<typeof AddCraftDialog>(null);
interface AddParam {
  isEdit: boolean;
  row?: CraftItem;
}
const openDialog = (data: AddParam) => {
  if (AddCraftDialogRef.value) {
    AddCraftDialogRef.value.handleOpen(data);
  }
};
</script>

<style lang="scss" scoped>
.app-container {
  .app__body__container {
    .app__body__table__container {
    }
    .circle-container {
      width: 20px;
      height: 20px;
      border: 1px solid var(--ep-border-color);
      border-radius: 50%;
      margin: 0 auto;
      &:hover {
        cursor: pointer;
      }
    }
    .list_button-container {
      margin-bottom: 20px;
    }
    .row_content-container {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      .content_item-container {
        display: flex;
        align-items: center;
        margin-bottom: 5px;
        .item_content {
          // flex: 1 1 auto;
          flex-shrink: 0;
        }
        .step-text {
          flex: 1 1 auto;
          margin: 0 5px;
          display: flex;
          align-items: center;
          .icon {
            margin-left: 5px;
          }
        }
      }
    }
  }
}
</style>
